<template>
	<view class="bg-white">
		<view class="padding">
			<u-search
			shape="round" 
			placeholder="请输入关键字"
			:animation="true"
			@change="getList"
			@search="getList"
			@custom="getList"
			v-model="search"></u-search>
		</view>
		<view class="padding select">
			<view @tap='selectArea' >{{chooseCity.areaName}}<text class="cuIcon-unfold"></text></view>
			<view @tap='show=true'>{{px?px:'排序'}}<text class="cuIcon-unfold"></text></view>
		</view>
		<view @tap='goHotel(item.id)' :class="{mf:item.ableRoomNum<1}" class="cu-card case" v-for="item in hotelList" :key='item.id'>
			<view class="cu-item shadow no-card">
				<view class="image">
					<!-- <image :src="item.images[0].sourceUrl"></image> -->
					<u-image :height="400" :src="item.images[0].sourceUrl+'?x-oss-process=image/resize,m_fixed,h_200,w_345'">
						<u-empty text="暂无图片" mode="photo"></u-empty>
					</u-image>
					<view v-if="item.ableRoomNum<1" class="cu-tag bg-gray">满房</view>
					<!-- <view class="cu-bar bg-shadeBottom"> <text class="text-cut">我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。</text></view> -->
				</view>
				<view>
					<view class="text-bold margin-top text-black">{{item.hotelName}}</view>
					<view class="text-df margin-top">
						<text @tap.stop="lookMap(item)">{{item.hotelAddress}}</text>
						<text class="text-yellow" v-if="isLogin(item.distance)">
							<text class="iconfont icon-dizhi"></text>
							<text>
								<template v-if="item.distance<1000&&item.distance>=0">
									{{item.distance.toFixed(2)}}m
								</template>
								<template v-else-if="item.distance>0">
									{{(item.distance/1000).toFixed(2)}}km
								</template>
								<template v-else>
									暂无位置信息
								</template>
							</text>
						</text>
						<text @tap.stop='goLogin()' class="cu-tag bg-yellow radius" v-else>登录</text>
					</view>
					<view class="margin-top">
						<text class="cu-tag light bg-blue radius">秒计房</text>
						<text class="cu-tag light bg-blue radius">叫醒服务</text>
						<text class="cu-tag light bg-blue radius">点餐服务</text>
					</view>
					<view class="flex margin-top">
						<text class="text-price text-yellow">{{item.lowPrice}}起</text>
						<u-rate disabled :count="5" active-color="#fbbd08" :current='5'></u-rate>
					</view>
				</view>
			</view>
		</view>
		<u-divider class="padding" color="#ccc">没有更多了</u-divider>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<u-select v-model="show" @confirm='confirm' :list="list"></u-select>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex';
	import {getHotelList} from '@/api/api.js'
	export default {
		data() {
			return {
				search:"",
				hotelList:[],
				scrollTop:0,
				show:false,
				list:[
					{
						value: '1',
						label: '价格降序'
					},
					{
						value: '2',
						label: '价格升序'
					},
				],
				px:null
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		computed:{
			...mapGetters(['chooseCity','time'])
		},
		onLoad(e) {
			if(e.search){
				this.search=e.search;
			}
			uni.$on('updateHotelList',()=>{
				setTimeout(()=>{
					this.getList();
				},200)
			})
		},
		onShow() {
			this.getList();
		},
		methods:{
			isLogin(distance){
				return distance&&uni.userInfo&&uni.userInfo.phone
			},
			goHotel(hotelId){
				const Authorization = uni.getStorageSync('Authorization');
				if(Authorization&&uni.userInfo&&uni.userInfo.phone){
					uni.navigateTo({
						url:'../hotelDetail/hotelDetail?hotelId='+hotelId
					})
				}else{
					this.goLogin();
				}
				
			},
			lookMap(obj){
				uni.openLocation({
					latitude:Number(obj.latitude),
					longitude:Number(obj.longitude),
					address:obj.hotelAddress,
					fail: (e) => {
						console.log(e);
					}
				})
			},
			getList(e){
				this.$u.debounce(this.getHotelList,500,true);
			},
			getHotelList(){
				uni.showLoading();
				getHotelList({
					areaCode:this.chooseCity.areaCode,
					hotelName:this.search?this.search:undefined,
					startTime:this.time[0],
					endTime:this.time[1]
				}).then(res=>{
					if(res.code==200){
						this.hotelList=res.data;
					}
					uni.hideLoading();
				}).catch(()=>{
					uni.hideLoading();
				})
			},
			confirm(e){
				this.px=e[0].label;
			},
			selectArea(){
				uni.navigateTo({
					url:'../cityList/cityList'
				})
			},
			goLogin(){
				uni.navigateTo({
					url:"../../mine/login/login"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.mf{
	opacity: 0.5;
}
.text-df{
	display: flex;
	align-items: center;
	&>text:last-child{
		width: 20%;
		flex-shrink: 0;
		margin-left: 20rpx;
	}
}
.flex{
	justify-content: space-between;
}
.image{
	width: 100%;
	height: 400rpx;
	image{
		height: 400rpx;
	}
}
.select{
	display: flex;
	justify-content: space-around;
}
</style>
